<template>
  <div style="width: 100%; height:100%;display: flex;">
    <div class="left-wraper" :class="{'collapse':isCollapse}">
      <div class="logo-wraper">
        <router-link to="/"><img src="../../../static/logo.png">
        </router-link>
      </div>
      <div class="menu-wraper">
        <el-menu :default-active="activeMenu" @select="handleNaviSelect" background-color="#2C3E50" text-color="#fff"
          :unique-opened="true" active-text-color="#55aaff">
          <router-link to="/admin/index">
            <el-menu-item index="admin-index">
              <i class="guicon xg-home"></i>&nbsp;
              <span slot="title">首页</span>
            </el-menu-item>
          </router-link>
          <el-submenu index="ym">
            <template slot="title">
                <i class="guicon xg-books"></i>&nbsp;
              <span>教材管理</span>
            </template>

            <router-link to="/admin/book/list">
              <el-menu-item index="admin-book-list"><i class="guicon xg-book"></i> 课本管理</el-menu-item>
            </router-link>

            <router-link to="/admin/book/list2">
              <el-menu-item index="admin-book_index_2"><i class="gws gws-goods"></i> 订单管理</el-menu-item>
            </router-link>
          </el-submenu>
        </el-menu>
      </div>
      <div style="position: relative; height: 100vh; " :class="{'collapse':isCollapse}">
        <div
          style="position:absolute; bottom: 0px;text-align:center; padding: 10px 5px; z-index: 1000; width: 165px; color:#888">
          版本号<br /></div>
      </div>
    </div>

    <div class="right-wraper">
      <!--右侧顶部工具条-->
      <div class="toolbar-wraper">
        <div @click="isCollapse=!isCollapse"
          style="width: 35px; height: 35px;  margin: 4px; font-size: 24px; text-align: center; cursor: pointer;"
          :title="isCollapse==true?'显示导航菜单':'隐藏导航菜单'">
          <i class="el-icon-s-fold" v-if="!isCollapse"></i>
          <i class="el-icon-s-unfold" v-if="isCollapse"></i>
        </div>
        <div style="padding:15px 15px;">

          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index"><i class="el-icon-s-home"
                v-if="index==0"></i> {{item}}</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <div style="flex: 1;"></div>
        <!--右侧内容-->
        <div style="margin-right: 20px;">
          <div style="display: flex;">
            <el-dropdown trigger="click" style="cursor: pointer;" @command="handleCommand">
              <div class="el-dropdown-link" style="display: flex;">
                <el-avatar size="small" style="margin: 5px;border: 1px solid #999;"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                </el-avatar>
                <span v-if="userinfo.nickname">{{userinfo.nickname}}<i
                    class="el-icon-arrow-down el-icon--right"></i></span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="profile">
                  <i class="el-icon-setting"></i>账号设置
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                  <i class="el-icon-switch-button"></i>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <el-card style="flex-grow: 1; overflow-y:auto; margin:5px 0px 0px 0px;  background-color: white;">
        <router-view></router-view>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeMenu: 'index',
        userinfo: localStorage.getItem("userinfo") != null ? JSON.parse(localStorage.getItem("userinfo")) : {},
        breadcrumbList: [],
        isCollapse: false,
        role: localStorage.getItem("role") != null ? localStorage.getItem("role").split(",") : ['admin']
      }
    },
    methods: {
      handleCommand: function(cmd) {
        console.log(cmd);
        switch (cmd) {
          case "logout":
            this.$confirm("确定要退出登录吗？").then(() => {
              this.$router.push("/login");
            }).catch(() => {

            })
            break;
        }
      },
      getBreadcrumb() {
        var path=this.$route.fullPath.substring(1,this.$route.fullPath.length);
        this.activeMenu = path.replaceAll("/", "-");
        this.breadcrumbList = this.$route.meta.breadcrumb;
      },
      handleNaviSelect(key, path) {
        localStorage.setItem("activeMenu",key);
        this.activeMenu = key;
        this.breadcrumbList = this.$route.meta.breadcrumb;
      }
    },
    watch: {
      $route() {
        this.getBreadcrumb();
      }
    },
    mounted() {
      if(localStorage.getItem("activeMenu")!=""){
        this.activeMenu=localStorage.getItem("activeMenu");
      }else{
        this.activeMenu="index";
      }
       this.getBreadcrumb();
    },
    created() {
      this.getBreadcrumb();
    },
  }
</script>

<style  scoped>
  .logo-wraper{
    border-bottom:  1px solid #425e79;
  }
  .left-wraper {
    width: 200px;
    background-color: #2C3E50;
    color: #E9E9E9;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -o-transition-duration: 1s, 1s, 1s, 1s, 1s;
    transition-property: width, height, transform, background, font-size;
    transition-duration: 1s, 1s, 1s, 1s, 1s;
  }

  .collapse {
    width: 0px;
    -o-transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
  }


  .menu-wraper {
    overflow-y: auto;
    overflow-x: hidden;
    height: 10000px;
    scrollbar-face-color: #C00;
    scrollbar-highlight-color: #F60;
    scrollbar-3dlight-color: #F00;
    scrollbar-darkshadow-color: #000;
    scrollbar-Shadow-color: #000;
    scrollbar-arrow-color: #FFF;
    scrollbar-track-color: #D6A27E;
  }

  ::-webkit-scrollbar {
    width: 0px;
  }

  .left-wraper_unfold {
    background-color: #2C3E50;
    color: #E9E9E9;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .right-wraper {
    flex: 1;
    display: flex;
    background-color: #EEEEEE;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
  }

  /* 处理左侧菜单 边问题 */
  .el-menu {
    border: none;
  }
  .el-menu-item{
    height:45px;
    line-height: 45px;
  }
  .el-menu-item, >>> .el-submenu__title{
      height: 45px;
      line-height: 45px;
    }

  .el-menu-item.is-active {
    color: #FFFFFF !important;
    background-color: #0080FF !important;
  }

  .toolbar-wraper {
    height: 45px;
    background-color: #fff;
    flex: 0 0 auto;
    line-height: 40px;
    box-sizing: border-box;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
    display: flex;
  }

  .togglefold {
    cursor: pointer;
    line-height: 45px;
    text-align: center;
    width: 45px;
    height: 45px;
  }

  .el-card__body {
    padding: 5px;
  }
</style>
